<template>
  <div>
    <div class="header">
      <h4>运输任务</h4>
      <div class="time"> <el-button size="small" type="text">查看更多 ></el-button></div>
    </div>
    <el-table
      ref="table"
      :data="list"
      height="300px"
      border
      style="width: 100%"
      class="scroll"
      :row-key="list.id"
      @cell-mouse-enter="mouseOver"
      @cell-mouse-leave="mouseLeave"
    >
      <el-table-column
        prop="id"
        label="任务编号"
      />
      <el-table-column
        prop="startAgency"
        label="起始地"
      />
      <el-table-column
        prop="endAgency"
        label="目的地"
      />
      <el-table-column
        prop="licensePlate"
        label="车辆"
      />
      <el-table-column
        prop="status"
        label="任务状态"
      >
        <template v-slot="{row}">
          <span>{{ row.status===1?'待执行':row.status===2?'进行中':row.status===3?'待确认':row.status===4? '已完成':'已取消' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      flag: false,
      tableData: []
    }
  },
  computed: {
    ...mapGetters('dashboard', ['listData']),
    list() {
      return this.listData.transportTaskList ? this.listData.transportTaskList : []
    }
  },

  mounted() {
    this.fn()
  },
  methods: { fn() {
    if (this.timer) {
      clearInterval(this.timer) // 清除之前的定时器
    }

    const table = this.$refs.table
    const divData = table.bodyWrapper
    this.timer = setInterval(() => {
      divData.scrollTop += 2
      if (divData.clientHeight + Math.ceil(divData.scrollTop) === divData.scrollHeight) {
        divData.scrollTop = 0
      }
    }, 50)
  },
  mouseOver() {
    clearInterval(this.timer) // 清除定时器
  },
  mouseLeave() {
    this.fn()
  }
  }
}
</script>
<style lang="scss" scoped>
.header{
    margin-bottom: 20px;
    h4{
        margin: 0;
    }
    display: flex;
    justify-content: space-between;
    .time{
    font-size: 14px;
    color: #818693;
    display: flex;
    -webkit-box-align: center;
    cursor: pointer;
    }
}
::v-deep .el-table{
/* 隐藏垂直滚动条 */
.element::-webkit-scrollbar {
    display: none;
}
}
</style>
